<template>
  <view class="container">
    <u-notice-bar class="noticeBar" mode="link" @click="showPopup" :text="notice" blockSize="12" color="#FFFFFF" bg-color="#1777FF" ></u-notice-bar>
    <view class="header">
      <image class="bg" :src="$Config.get('imageUrl')+'/data/head.png'" mode="scaleToFill"/>
      <view class="content">
        <view class="left">
          <view class="p1">{{ stat.shareAmount }}</view>
          <view class="p2">有效股权分红份额</view>
        </view>
        <view class="right">
          <view class="p1">{{ getNumTimes(stat.shareRate ,100) }}<span>%</span></view>
          <view class="p2">我的股权分红占比</view>
        </view>
      </view>
    </view>
    <view class="content">
<!--      <u-tabs :list="tabs" @click="click"></u-tabs>-->
      <view class="list" v-if="list.length > 0">
        <view class="item" :class="{'disabled':item.status == 2 }" v-for="(item,i) in list " :key="i">
          <view class="top">
            <view class="left">
              <view class="p1">下单金额{{ item.orderAmount }}元</view>
              <view class="p2">下单时间: {{item.orderTime}} </view>
              <view class="p2">有效时间: {{item.expireTime}}</view>
            </view>
            <view class="right">
              <view class="p2">+{{ item.shareAmount }}</view>
              <view class="p1">
                获得股权
              </view>
            </view>
          </view>
          <view class="bottom">
            <view>已享受无责分红<span>{{ getDays(item.effectTime) }}</span>天</view>
          </view>
        </view>
      </view>
      <empty v-if="list.length == 0" :isLoading="false" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
    </view>
    <u-popup :show="popup" closeable round="24rpx" mode="center" @close="close">
      <view class="popup">
        <view class="title">考核规则</view>
        <view>
          股东可享受一年无责分红时间，一年后增加KPI考核。具体考核规则如下： <br/><br/>
          1.分红的时间：确认收货后第二天开始分红。<br/>
<!--          2.全体合作分红的金额按照3.2条计算。<br/>-->
          2.如公司发展需要，经全部合作方（公司注册后，按股东大会决策执行)协商一致，也可不分红，全部利润作为公司发展资金。<br/>
          3.公司的发展基金无上限限额。<br/>
          4.如公司上月分红经核算分配后仍有结余，自动计入下月股东分红。例如：9月总净利润1个亿，在提取50%的发展基金后（即5000万），9月分红净利润50%即5000万，实际股权释放分配额只有50%，即所有股东分红净利润2500万，剩余未分配净利润2500万自动计入股东10月分红，以此类推。<br/>
          5.年底经核算后，如发展资金有结余，按结余部分的20%作为年底分红。
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getUserStat,numTimes } from '@/core/app'
export default {
  data() {
    return {
      tabs: [{
        name: '全部',
      }, {
        name: '股权奖励',
      }, {
        name: '现金奖励'
      }],
      list: [],
      notice: '股东可享受一年无责分红时间，一年后增加KPI考核。具体考核规则如下：1.分红的时间：确认收货后第二天开始分红。 2.如公司发展需要，经全部合作方（公司注册后，按股东大会决策执行)协商一致，也可不分红，全部利润作为公司发展资金。3.公司的发展基金无上限限额。 4.如公司上月分红经核算分配后仍有结余，自动计入下月股东分红。例如：9月总净利润1个亿，在提取50%的发展基金后（即5000万），9月分红净利润50%即5000万，实际股权释放分配额只有50%，即所有股东分红净利润2500万，剩余未分配净利润2500万自动计入股东10月分红，以此类推。 5.年底经核算后，如发展资金有结余，按结余部分的20%作为年底分红。',
      popup:false,
      stat:{
        shareRate:0,// 股权份额比例，需要转换成百分制
        shareAmount:0,//我的总份额
      },
    }
  },

  onLoad(options) {

  },
  onShow() {
    // 页面显示
    this.stat = getUserStat();
    this.getList()
  },
  methods: {
    click(e) {
      console.log(e)
    },
    showPopup(){
      this.popup = true
    },
    close() {
      this.popup = false
    },
    getList(){
      this.$request.get('wx/share/list',{}).then(res=>{
        if(res.data){
          this.list = res.data.items;
        }
      }).catch(err=>{
        this.$toast(err.errmsg)
      })
    },
    //根据传入时间 计算到当天的天数
    getDays(date){
      let date1 = new Date(date.replace(/-/g, '/'));
      let now = new Date();
      let nowTime = now.getTime();
      let time = new Date(date1).getTime();
      let days = Math.floor((nowTime - time) / (24 * 3600 * 1000));
      return days < 1 ? 1 : days;
    },
    dateFormat(date, fmt) {
      if(date == null || date == undefined || date == ''){
        return ''
      }
      date = new Date(date);
      var a = ["日", "一", "二", "三", "四", "五", "六"];
      var o = {
        "M+": date.getMonth() + 1, // 月份
        "d+": date.getDate(), // 日
        "h+": date.getHours(), // 小时
        "m+": date.getMinutes(), // 分
        "s+": date.getSeconds(), // 秒
        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds(), // 毫秒
        w: date.getDay(), // 周
        W: a[date.getDay()], // 大写周
        T: "T",
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                  ? o[k]
                  : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
    getNumTimes(val1,val2){
      return numTimes(val1,val2);
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx 40rpx;
  background: #F7F7F7;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
  /deep/ .u-notice-bar{
    border-radius: 8rpx;
    padding: 6rpx 10rpx;
    margin-bottom: 20rpx;
  }

  .header {
    height: 220rpx;
    border-radius: 26rpx 26rpx 0 0;
    color: #FFF;
    position: relative;
    overflow: hidden;
    .content {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 80rpx;

      .left {
        text-align: center;
        color: #FFFFFF;
        position: relative;

        .p1 {
          font-size: 48rpx;
          font-weight: bold;
        }

        .p2 {
          margin-top: 14rpx;
          font-size: 28rpx;
          font-weight: 500;
        }

        &:before {
          content: '';
          position: absolute;
          top: 50%;
          right: -40rpx;
          width: 2rpx;
          height: 60rpx;
          background: rgba(255, 255, 255, 0.12);
          transform: translateY(-50%);
        }
      }

      .right {
        .p1 {
          font-size: 48rpx;
          font-weight: bold;
          text-align: center;

          span {
            font-size: 24rpx;
            font-weight: 200;
            margin-left: 6rpx;
          }
        }

        .p2 {
          margin-top: 10rpx;
          font-size: 28rpx;
          font-weight: 500;
        }
      }
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  }
  .list{
    margin-top: 20rpx;
    .item{
      background: #FFF;
      border-radius: 10rpx;
      padding: 28rpx 40rpx;
      margin-bottom: 20rpx;

      .top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 18rpx;
        border-bottom: solid 1px #F2F2F2;
        .left{
          .p1{
            font-size: 32rpx;
            font-weight: 500;
            color: #010812;
          }
          .p2{
            font-size: 24rpx;
            font-weight: 400;
            color: #6F6F6F;
            margin-top: 10rpx;
          }
        }
        .right{
          .p1{
            font-size: 24rpx;
            font-weight: 400;
            color: #6F6F6F;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .image{
              width: 32rpx;
              height:32rpx;
              margin-right: 6rpx;
              image{
                width: 100%;
                height: 100%;
              }
            }
          }
          .p2{
            margin-top: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #F74F4F;
          }
        }
      }
      .bottom{
        padding-top: 16rpx;
        text-align: right;
        font-size: 24rpx;
        font-weight: 400;
        color: #686868;
        span{
          color: #B70000;
          margin: 0 8rpx;
        }
      }

    }
    .disabled{
      background: rgba(0, 0, 0, 0.2);
      .top{
        border-bottom: solid 1px #b1afaf;
      }
    }
  }
  .popup{
    padding:34rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 48rpx;
    box-sizing: border-box;
    width: 600rpx;
    margin: 0 auto;
    .title{
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      text-align: center;
      margin-bottom: 10rpx;
    }
  }
}
</style>